<template>
    <div class="center">
        <div class="center1">
            <div class="flex1" style="width: 98%; height: 100px;">
                <div class="production">
                    <p>当天产量</p>
                    <div class="item">
                        <div v-for="( v, i ) in  sumTodayArr " :key="i">
                            <img src="../../../assets/imgx/number_flie.png" alt="" />
                            <span>{{ v }} <a v-show="i == 1"> ,</a></span>&nbsp;&nbsp;
                        </div>
                        <h4 class="h4">块</h4>
                    </div>
                </div>
                <div class="flex total-output">
                    <template v-for="( v, i ) in  totalCapacity ">
                        <div :key="'xx' + i">
                            <p>{{ v.workforceName }}总产量</p>
                            <p class="p1"><span>{{ v.totalCapacity }}</span>块</p>
                        </div>
                        <div :key="i" class="border1" :style="{ 'display': i == totalCapacity.length - 1 ? 'none' : 'block' }"></div>
                    </template>
                </div>
            </div>
            <div class="flexsb">
                <img src="../../../assets/imgx/left.png" alt="" />
                <img :src="imageUrl + locality" alt="" />
                <img src="../../../assets/imgx/right.png" alt="" />
            </div>
            <div class="position flex">
                <div class="positionCenter">
                    <el-carousel :autoplay="true" height="150px">
                        <el-carousel-item v-for="( v, i ) of  positionList " :key="i">
                            <div v-for="(item, index) in v" :key="index" @click="triggerAssembly(item)">
                                <img v-if="item.status == 2" src="../../../assets/imgx/region-ok.png" alt="" />
                                <img v-else-if="item.status == 1" src="../../../assets/imgx/region-warning.png" alt="" />
                                <img v-else-if="item.status == 0" src="../../../assets/imgx/region-error.png" alt="" />
                                <p>{{ item.assemblyName }}</p>
                            </div>
                        </el-carousel-item>
                    </el-carousel>
                </div>
            </div>
        </div>
        <div class="center2">
            <div class="operating-data">
                <div class="flex">
                    <div class="title">
                        <img src="../../../assets/imgx/title-bg-image.png" alt="" />
                        <div class="">运行数据 <span>OPERATIONAL DATA</span><img src="../../../assets/icon/title-tail.png" alt="" /></div>
                    </div>
                    <div class="flex tab-btn">
                        <div class="box">
                            <div class="btn" :style="{ color: isShow ? '#3377bb' : '#97DAFF' }" style="margin-right: 10px" @click="isShow = false">
                                <div class="p" @click="showCapacityChart">产能</div>
                            </div>
                            <div class="btn" :style="{ color: !isShow ? '#3377bb' : '#97DAFF' }" @click="isShow = true">
                                <div class="p" @click="runMaskLayer = false, showBeatChart(BeatChartArr)">节拍</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="combo-box box_asd_fad">
                    <p></p>
                    <p></p>
                    <p></p>
                    <p></p>
                    <p></p>
                    <p></p>
                    <p></p>
                    <p></p>
                    <!-- 产能 -->
                    <div class="chart" v-show="!isShow">
                        <div class="aaaa">
                            <div class="btn" v-for="( item, index ) in  shiftCapacityList " :style="{ 'color': item.workforceId === workforceId ? '#ffffff' : '#12679fFF' }"
                                :key="index" @click="shiftIndex = index; showShiftCapacity(item, index)">
                                <span>{{ item.workforceName }}</span>
                            </div>
                        </div>
                        <div id="myBarChart" :style="{ width: '100%', height: '100%' }"></div>
                        <div class="outtitle" v-show="runMaskLayer">(块)</div>
                    </div>
                    <!-- 节拍 -->
                    <div class="chart" v-show="isShow">
                        <div id="eCharts_Id" :style="{ width: '909px', height: '243px' }"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import {
    getTrendsRecordCapacityCount,
    getTodayCapacityTotal,
    searchAssemblyList,
    getCapacityRecord,
    getBeatRecord,
} from "@/api/homeModeApi/index"
import * as  echarts from "echarts";
import { range } from "@/utils/index"

export default {
    data() {
        return {
            runMaskLayer: true,
            isShow: false,
            sumTodayArr: [0, 0, 0, 0, 0],
            locality: "",
            totalCapacity: [],
            shiftCapacityList: [],
            positionList: [],
            BeatChartArr: {},
            BeatChart: [],
            // this: "",
            // 销毁echarts实例
            shiftIndex: 0,
            myChart: "",
            myChart1: "",
            timerSum: ""
        }
    }, computed: {
        imageUrl() {
            return window.location.origin + '/'
        },

    },
    created() {
        //this.deviceAnalysisColumn()
        this.listAssembly();
    },
    beforeDestroy() {
        clearInterval(this.timer)
        // clearInterval(this.timerSum)
        this.myChart.dispose()
        this.myChart1.dispose()
    },
    mounted() {
        // 获取图片路径
        this.locality = this.$store.state.UserIndex.equipment.primaryImage;
        // 基于准备好的dom，初始化echarts实例
        this.myChart = echarts.init(document.getElementById("myBarChart"));
        this.myChart1 = echarts.init(document.getElementById("eCharts_Id"));

        // this.drawLine(this.BeatChart);

        this.init()

        // this.timerSum = setInterval(() => {
        //     clearInterval(this.timer)
        //     this.init()
        // }, 200000)

    },

    methods: {
        init() {
            this.getCapacityTotal();
            this.getTodayCapacityTotal()
            this.getCapacityRecord();
            this.getBeatRecord();

            this.timer = setInterval(() => {
                //this.deviceAnalysisColumn()
                this.listAssembly();

                this.getBeatRecord();

                this.getTodayCapacityTotal()
                this.getCapacityTotal();
                this.getCapacityRecord();

            }, 7000)
        },

        // 早班总常量
        getCapacityTotal() {
            getTrendsRecordCapacityCount().then(res => {
                if (res.code == 200) {
                    this.totalCapacity = res.data
                }
            })
        },
        //首页获取banner信息
        listAssembly() {
            this.equipmentId = this.$store.state.Userindex.equipmentId
            searchAssemblyList({ equipmentId: this.equipmentId }).then(res => {
                if (res.code == 200) {
                    //this.positionList = this.groupAssembly(res.data)
                    // 给banner分组 5个为一组进行划分
                    const list = res.data
                    const arr = []
                    for (var i = 0; i <= list.length - 1; i += 5) {
                        arr.push(list.slice(i, i + 5))
                    }
                    this.positionList = arr;
                }
            })
        },
        //二级跳转
        triggerAssembly(item) {
            this.$router.push(`/maintain/${item.assemblyId}`)
        },
        getTodayCapacityTotal() {
            getTodayCapacityTotal().then(res => {
                if (res.code == 200) {
                    this.sumTodayArr = String(res.data).split("")
                }
            })
        },
        // 产能折线图
        getCapacityRecord() {
            getCapacityRecord().then(res => {
                // console.log(res);
                if (res.code == 200) {
                    if (res.data != null) {
                        this.shiftCapacityList = res.data;
                        this.shiftCapacity = res.data[this.shiftIndex]
                        this.showShiftCapacity(this.shiftCapacity)
                    }
                }
            })
        },
        getBeatRecord() {
            getBeatRecord().then(res => {
                if (res.code == 200) {
                    if (res.data != null) {
                        this.BeatChart = res.data;
                        this.BeatChartArr = res.data;
                    }
                }
            })
        },
        //产能模块点击事件
        showCapacityChart() {
            this.runMaskLayer = true;
            if (this.shiftCapacity) {
                this.showShiftCapacity(this.shiftCapacity)
            }
        },
        showShiftCapacity(item) {
            this.workforceId = item.workforceId

            let startTime = item.startTime;
            let endTime = item.endTime
            let start = parseInt(startTime.split(':')[0]) - 8, end = parseInt(endTime.split(':')[0]) - 8
            start = (start + 24) % 24
            end = (end + 24) % 24
            end = end === 0 ? 24 : end//fixed bug
            let arr = range(start, end).map(el => `${(el + 8) % 24}-${(el + 9) % 24}`)
            // 时间有问题

            /* let arr = [];
            for (let index = item.startTime.slice(0, 2); index <= item.endTime.slice(0, 2) - 1; index++) {
                if (index == 24) {
                    index = 0;
                } else {
                    arr.push(`${Number(index)}-${Number(index) + 1}`)
                }
            } */
            let err = []
            if (item.recordCapacityList.length) {
                item.recordCapacityList.forEach((v, i) => {
                    err.push(v.capacity);
                });
            }
            this.drawLine(arr, err)
        },
        showBeatChart(item) {
            this.workforceId = item.workforceId
            let arr = []
            let err = []
            if (item.length) {
                item.forEach((v, i) => {
                    arr.push(this.$moment(v.hourMinute).format('LT').slice(0, 4))
                    err.push(v.dataValue);
                });
            }
            // console.log(arr, err);
            this.drawLineBeat(arr, err)
        },

        // 产能图表
        drawLine(arr, err) {
            this.myChart.clear()
            // 绘制图表
            this.myChart.setOption({
                grid: { borderWidth: 1, left: "7%", top: "20%", right: "5%", bottom: "10%" },
                dataset: [
                    {
                        // 每个维度的信息
                        dimensions: ["createTime", "extValue"],
                        // 目标数组，相当于 serise 中的 data
                        source: this.BeatChart
                    },
                    // 数据转换器
                    {
                        transform: {
                            type: "sort", // 排序
                            config: {
                                dimension: "value", // 映射字段 value
                                order: "desc", // 倒叙
                            },
                        },
                    },
                ],
                xAxis: {
                    data: arr,
                    type: "category",
                    axisLine: {
                        show: true, lineStyle: { color: "#155DAD", },
                    },
                    axisTick: { show: false, },
                    axisLabel: {
                        interval: 0, fontSize: 10, fontWeight: 500, color: "#1DCEFF", opacity: 0.6, rotate: 0, textStyle: { color: "#E9EFFF", }
                    },
                },
                yAxis: [
                    {
                        name: "(块)",
                        type: "value",
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: "#011431",
                            },
                        },
                        axisLabel: {
                            textStyle: {
                                color: "#E9EFFF",
                            },
                            ormatter: function (value, index) {
                                if (value === 0) {
                                    return '0';
                                } else {
                                    return value;
                                };

                            },
                            interval: 0,
                            fontSize: 10,
                            fontWeight: 500,
                            color: "white",
                            opacity: 0.6,
                            rotate: 15,
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                type: "dashed",
                                color: "#155DAD",
                                opacity: 0.5,
                            },
                        },
                    },
                ],
                series: [
                    //底层渐变效果柱状图
                    {
                        data: err,
                        type: "bar",
                        barWidth: 18,

                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: "#0AFCFF",
                                },
                                {
                                    offset: 1,
                                    color: "#0CA0FE",
                                },
                            ]),
                        },
                        z: 1, //用z来设置层次叠加顺序
                    },
                    //第二层也就是最上层，分割效果
                    {
                        data: err,
                        type: "pictorialBar",
                        symbol: "",
                        itemStyle: {
                            color: "#1c242b",
                        },
                        symbolMargin: "2", //图形的两边间隔
                        symbolClip: true, //是否裁剪 
                        symbolSize: [18, 2],
                        symbolRepeat: "true",
                        z: 10, //用z来设置层次叠加顺序
                        emphasis: {
                            barBorderRadius: 20,
                        },
                    },
                ],
            });

        },
        // 节拍 图表
        drawLineBeat(arr, err) {
            // 基于准备好的dom，初始化echarts实例
            // this.myChart1 = echarts.init(document.getElementById("eCharts_Id"));
            this.myChart1.clear()
            // 绘制图表
            this.myChart1.setOption({
                grid: {
                    borderWidth: 1,
                    left: "5%",
                    top: "20%",
                    right: "6%",
                    bottom: "20%"
                },
                // this.myChart.setOption({
                legend: {
                    type: "plain",
                    // left: 'right',
                    top: "15%",
                    right: "0%",
                },

                xAxis: [{
                    type: "category",
                    data: arr,

                    boundaryGap: false,
                    // show: false,

                    // 倾斜
                    axisLabel: {
                        interval: 0,
                        rotate: -40,
                        textStyle: {
                            color: "#E9EFFF",

                        },
                    }
                }],
                yAxis: {
                    name: "(s)",
                    color: "#E9EFFF",

                    type: "value",
                    boundaryGap: false,
                    axisTick: {
                        alignWithLabel: false,
                        show: true,
                        lineStyle: {
                            color: "#011431",
                        },
                    },
                    axisLabel: {
                        textStyle: {
                            color: "#E9EFFF",

                        },
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: "dashed",
                            color: "#155DAD",
                            opacity: 0.5,
                        },
                    },
                },
                series: [
                    {
                        data: err,
                        type: "line",
                        smooth: true,
                        symbol: "circle",
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: "#1D5CBA",
                                },
                                {
                                    offset: 1,
                                    color: "#011431",
                                },
                            ]),
                        },
                    },
                ],
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "line",
                    },
                },
            },

            );
        },
    },
}
</script>
<style lang="less" scoped>
/deep/.el-carousel__container {
    height: 180px !important;
}

.center {
    height: 100%;
    display: flex;
    flex-direction: column;
    font-size: 0.21333rem;
    justify-content: space-between;

    .center1 {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;

        .flex1 {
            display: flex;
            justify-content: space-evenly;
            align-items: center;

            .total-output {
                height: 100%;
                overflow-x: auto;

                .border1 {
                    width: 1px;
                    background: #0D63B1;
                    opacity: 0.75;
                }
            }


        }

        .flexsb {
            display: flex;
            justify-content: space-around;
            width: 100%;
            margin: 0px 47px;

            img:nth-child(1) {
                width: 94px;
                height: 315px;
            }

            img:nth-child(2) {
                width: 438px;
                height: 315px;

            }

            img:nth-child(3) {
                width: 94px;
                height: 315px;

            }
        }


        .position {
            width: 90%;
            height: 162px;
            display: flex;
            overflow-x: auto;


            .positionCenter {
                width: 100%;
                display: flex;

                .el-carousel {
                    width: 100%;

                    /deep/ .el-carousel__indicators--horizontal {
                        display: none;
                    }

                    .el-carousel__item {
                        display: flex;
                        width: 100%;
                        justify-content: center;

                        div {
                            width: 106px;

                            margin: 0px 15px;
                            flex: none;

                            img {
                                width: 106px;
                                height: 99px;
                            }
                        }
                    }

                }

            }


        }
    }

    .center2 {
        width: 100%;
        height: 31%;

        .operating-data {
            .flex {



                .title {
                    position: relative;
                    height: 42px;

                    img:nth-child(1) {
                        width: 100%;
                        height: 100%;
                    }

                    div {
                        color: #fff;
                        position: absolute;
                        top: 12%;
                        left: 15%;
                        font-size: 18px;

                        span {
                            margin-left: 5px;
                            color: #1779b9;
                            font-size: 14px !important;
                        }

                        img {
                            margin-left: 10px;
                        }
                    }
                }


                .tab-btn {
                    width: 40% !important;

                    .box {
                        width: 100%;
                        display: flex;
                        justify-content: flex-end;
                        align-items: center;
                    }
                }
            }

            .box_asd_fad {
                width: 100% !important;
                // margin: 23px 0px 0px 0px;
                height: 80%;

                .outtitle {
                    position: absolute;
                    top: 0%;
                    color: #acabab;
                    left: 4%;
                    z-index: 0;
                }

                .chart {
                    position: relative;


                    .aaaa {
                        display: flex;

                        z-index: 10;
                        position: absolute;
                        top: 10px;
                        left: 77px;

                        .btn {
                            width: 72px;
                            height: 20px;
                            opacity: 1;
                            border: 1px solid;
                            border-image: radial-gradient(circle, rgba(39.9994, 143.998, 235.996, 1), rgba(23, 197.696, 255, 1)) 1 1;
                            line-height: 20px;
                            margin: 5px;
                            cursor: pointer;

                            span {
                                width: 100%;
                                text-align: center;
                                display: inline-block;

                            }
                        }
                    }

                }
            }
        }

    }


    .production {
        font-size: 18px;
        font-family: SourceHanSansCN-Medium, SourceHanSansCN;
        font-weight: 500;
        color: #ffffff;

        p {
            font-size: 18px;
            font-family: SourceHanSansCN-Medium, SourceHanSansCN;
            font-weight: 500;
            color: #FFFFFF;
            margin-top: 15px;
        }



        .item {
            display: flex;
            margin-top: 20px;
            align-items: flex-end;
            font-family: "思源黑体", "Microsoft YaHei";


            div {
                position: relative;

                img {
                    width: 42px;
                    height: 57px;
                }

                span {
                    position: absolute;
                    top: 4px;
                    left: 13px;
                    font-size: 32px;
                    text-shadow: 0px -2px 20px #1c7eed;
                    font-family: "思源黑体", "Microsoft YaHei";
                    font-weight: 700;

                }

                h4 {
                    font-size: 18px;
                    font-weight: 400;
                    line-height: 80px;
                }
            }
        }

    }

    .total-output {
        color: #ffffff;
        height: 100%;
        font-size: 18px;

        display: flex;

        div {
            width: 96px;
            margin-left: 17px;

            p {
                font-size: 18px;
                font-family: SourceHanSansCN-Medium, SourceHanSansCN;
                font-weight: 500;
                color: #FFFFFF;
            }

            .p1 {

                font-size: 18px;
                font-weight: 400;

                span {
                    margin-right: 10px;
                }
            }
        }



        // line-height: 60px;


        div {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            justify-content: space-around;

            span {
                color: #d9ebf5;
                font-size: 28px;

                text-shadow: 0px -1px 20px #1c7eed;
                font-family: "思源黑体", "Microsoft YaHei";
            }
        }
    }

    .position {
        overflow: auto;

        div {
            flex: none;
            text-align: center;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            // position: relative;
            width: 64px;
            margin-right: 30px;

            img {
                width: 100%;
                height: 64px;
            }

            p {
                font-size: 14px;
                font-family: SourceHanSansCN-Normal, SourceHanSansCN;
                font-weight: 400;
                color: #bee5fd;
                width: 100%;
                height: 40px;
                text-overflow: ellipsis;

                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;


                overflow-wrap: break-word;
                word-break: break-all;
                white-space: normal;
                overflow: hidden;
            }
        }
    }

    // background: #fff;
    .tab-btn {
        width: 170px;
        text-align: center;
        height: 100%;

        .btn {

            font-weight: 300;
            color: #97daff;
            cursor: pointer;
            width: 104px;
            height: 27px;

            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background-image: url("../../../assets/imgx/energy.png");
            background-repeat: no-repeat;
            background-size: 100%;

            .p {
                width: 100%;
                height: 100%;

                text-align: center;
                line-height: 27px;
                font-family: SourceHanSansCN-Light, SourceHanSansCN;
                font-size: 16px;

            }
        }
    }

    .operating-data {
        z-index: 1;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .chart {
            width: 100%;
            height: 100%;
        }
    }
}
</style>